<!-- 用户管理页面 -->
<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="用户姓名">
                <el-input v-model="searchMap.name" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="用户账号">
                <el-input v-model="searchMap.account" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-select v-model="searchMap.status" clearable placeholder="请选择">
                    <el-option v-for="item in statusLists" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-button type="primary" @click="fetchData()">查询</el-button>
            <el-button type="primary" @click="handleEdit('')">新增</el-button>
        </el-form>

        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="序号"> </el-table-column>
            <el-table-column prop="name" label="用户名字" width="80"> </el-table-column>
            <el-table-column prop="account" label="账号" width="80"> </el-table-column>
            <el-table-column prop="image" label="头像">
                <template scope="scope">    
                    <el-popover placement="right" title="" trigger="hover">
                        <img :src="scope.row.image" style="height: 400px;width: 500px">
                        <img slot="reference" :src="scope.row.image" :alt="scope.row.url"
                            style="max-height: 50px;max-width: 130px">
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="120"> </el-table-column>
            <el-table-column prop="email" label="邮箱" width="160"> </el-table-column>
            <el-table-column prop="birth" label="出生日期" :formatter="dataFormat" width="160"> </el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="120"> </el-table-column>
            <el-table-column prop="departName" label="部门名称" width="120"> </el-table-column>
            <el-table-column prop="positionName" label="岗位名称" width="120"> </el-table-column>
            <el-table-column prop="parentName" label="上级名称" width="120"> </el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="isResposible" label="是否负责人">
                <template scope="scope">
                    <span type="primary" v-if="scope.row.isResposible === 0">是</span>
                    <span type="warning" v-if="scope.row.isResposible === 1">否</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template scope="scope">
                  <el-button type="primary" v-if="scope.row.status === 0" @click="updateStatus(scope.row.id,scope.row.status)">启用</el-button>
                  <el-button type="warning" v-if="scope.row.status === 1" @click="updateStatus(scope.row.id,scope.row.status)">禁止</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
                    <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10, 20, 30, 60]"
            :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>

        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form label-width="80px">
                <el-row>
                    <el-col span="11">
                        <el-form-item label="用户名">
                            <el-input v-model="user.name" />
                        </el-form-item>
                    </el-col>
                    <el-col span="11">
                        <el-form-item label="账号">
                            <el-input v-model="user.account" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col span="11">
                        <el-form-item label="电话"><el-input v-model="user.phone" type="phone" /></el-form-item>
                    </el-col>
                    <el-col span="11">
                        <el-form-item label="邮箱"><el-input v-model="user.email" type="email" /></el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="11">
                        <el-form-item label="性别">
                            <el-radio-group v-model="user.sex">
                                <el-radio :label="0">男</el-radio>
                                <el-radio :label="1">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col span="11">
                        <el-form-item label="出生日期">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="user.birth"></el-date-picker>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- <el-form-item label="头像">
                    <el-upload class="avatar-uploader" action="/api/upload/image" name="image"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :headers="headers"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                </el-form-item> -->
                <el-row>
                    <el-col span="11">
                        <el-form-item label="拥有角色">
                            <el-select v-model="user.roleId">
                                <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col span="11">
                        <el-form-item label="所属部门">
                            <el-select v-model="user.departId">
                                <el-option v-for="item in departList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="11">
                        <el-form-item label="上级名称">
                            <el-select v-model="user.parentId">
                                <el-option v-for="item in list" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col span="11">
                        <el-form-item label="岗位名称">
                            <el-select v-model="user.positionId">
                                <el-option v-for="item in positionList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col span="11">
                        <el-form-item label="是否启用">
                            <el-radio-group v-model="user.status">
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col span="11">
                        <el-form-item label-width="100px" label="是否负责人">
                            <el-radio-group v-model="user.isResposible">
                                <el-radio :label="0">是</el-radio>
                                <el-radio :label="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="11">
                        <el-form-item label="备注"><el-input type="textarea" v-model="user.remark" /></el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="handleSave()" style="margin-left: 240px">保存</el-button>
                    <el-button @click="dialogFormVisible = false" style="margin-left: 10px">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
  
  <script>
import userService from "@/api/user";
import roleService from "@/api/role";
import departmentService from "@/api/depart";
import positionService from "@/api/position";
import { getToken } from '@/utils/auth'
//导入日期组件
import moment from 'moment'

  export default {
    data() {
      return {
        headers:{
         token:getToken()
       },
        tableData: [],
        statusLists: [
          {
            lable: "启用",
            value: 0,
          },
          {
            lable: "禁用",
            value: 1,
          }
         
       
        ],
        roleList:[],
        departList:[],
        list:[],
        positionList:[],
        statusList:{status:'',id:''},
        dialogFormVisible: false,
        id: "",
        imageUrl: '',
        user: {
        },
        searchMap: {
          limit: 5,
          page: 1,
          name: "",
          account: "",
          status: "",
        },
        //记录总数
        count: 0,
      };
    },
    //钩子函数
    created() {
      this.findAll();
      this.findAllRole();
      this.findAllDepart();
      this.fetchData();
      this.findAllPosition();
    },
    methods: {
    
      //修改或新增
      handleEdit(id) {
  
        this.id=id;
  
        //打开弹窗
        this.dialogFormVisible = true;
  
        if(id !== ''){
  
          //根据id查询数据绑定到模型上面
          userService.find(id).then(response => {
  
            //回显
            this.user = response.data
  
            //回显图片
            this.imageUrl = this.user.image
  
          })
  
        } else {
  
          //清除之前模型的脏数据
          this.user = {
  
          }
  
          this.imageUrl = ''
        }
      },
  
      //新增和修改的提交
      handleSave() {

         //携带图片路径
         this.user.image=this.imageUrl

        userService.update(this.id, this.user).then((response) => {
          //新增或者修改成功
          this.$message({
            message: response.msg,
            type: "success",
          });
  
          //重新加载列表的数据
          this.fetchData();
  
          //关闭弹窗
          this.dialogFormVisible = false;
        });
      },
  
      //查询数据
      fetchData() {
        userService.list(this.searchMap).then((response) => {
          this.tableData = response.data;
          this.count = response.count;
        });
      },
      //当页面大小改变的时候调用此方法，传递改变的页面大小
      sizeData(size) {
        this.searchMap.limit = size;
        this.fetchData();
      },
      pageData(page) {
        this.searchMap.page = page;
        this.fetchData();
      },

      //提交图片
      handleAvatarSuccess(res, file) {
         //上传成功后绑定后端返回的图片地址
         this.imageUrl = res.data
      },
      //提交图片之前的判断
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 5;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isJPG && isLt2M;
      },

      
      //根据所有角色
      findAllRole(){
        roleService.findAll().then(response=>{
            this.roleList=response.data
        })
      },
  
      //查询所有部门
      findAllDepart(){
        departmentService.findAll().then(response=>{
          this.departList=response.data
        })
      },
      //查询所有用户
      findAll(){
        userService.findAll().then(response=>{
          this.list=response.data
        })
      },
      //查询所有部门
      findAllPosition(){
        positionService.findAll().then(response=>{
          this.positionList=response.data
        })
      },
        //增加一个格式化日期的方法
        dataFormat(row, column) {

            let date = row[column.property]

            if (date == undefined) {
                return ''
            }

            return moment(date).format('YYYY-MM-DD hh:mm:ss')
        },
        //点击修改状态
    updateStatus(id,status) {
      this.$confirm('您确定要修改状态吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (status === 0) {
            status = 1
          } else {
            status = 0
          }
        this.statusList.status=status
        this.statusList.id=id
        userService.update(id,this.statusList).then(response => {
          this.$message({
            type: 'success',
            message: '修改状态成功!'
          });

          this.fetchData()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
      })

    },
  
      //删除
      handleDelete(id){
        this.$confirm('您确定要删除吗, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
  
            userService.remove(id).then(response=>{
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
  
              this.fetchData()
  
            })
          
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
      }
    },
  };
  </script>
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
